<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左右结构页面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f6f8;
        }

        .header {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: skyblue;
            padding: 10px 20px;
            border-bottom: 1px solid #ddd;
        }

        .header-title {
            font-size: 1.5em;
            color: #333;
            text-align: center;
            flex-grow: 1;
        }

        .header-right {
            display: flex;
            align-items: center;
        }

        .header-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden; /* 隐藏超出圆形区域的部分 */
            margin-right: 10px;
        }

        .header-username {
            margin-right: 20px;
            color: #333;
        }

        .header-logout {
            text-decoration: none;
            color: #333;
            padding: 5px 10px;
            border: 1px solid #333;
            border-radius: 5px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .header-logout:hover {
            background-color: #333;
            color: #fff;
        }

        .container {
            display: flex;
            height: calc(100vh - 60px);
        }

        .sidebar {
            width: 200px;
            background-color: #ffffff;
            color: #333;
            padding: 20px;
            border-right: 1px solid #ddd;
        }

        .sidebar h2 {
            margin: 0 0 20px;
            font-size: 1.2em;
            text-align: center;
            color: #555;
        }

        .sidebar ul {
            list-style: none;
            padding: 0;
        }

        .sidebar ul li {
            margin-bottom: 10px;
        }

        .sidebar ul li a {
            color: #333;
            text-decoration: none;
            display: flex;
            align-items: center;
            padding: 8px 0;
            border-radius: 5px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .sidebar ul li a:hover {
            background-color: #f2f2f2;
            color: #222;
        }

        .sidebar ul li a i {
            margin-right: 10px;
            font-size: 1.2em;
            color: #666;
        }

        .sidebar ul li a.active {
            background-color: #ffecb3;
            color: #333;
        }

        .content {
            flex: 1;
            padding: 20px;
            background-color: #ffffff;
            box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
        }

        .content h2 {
            margin-top: 0;
            color: #333;
        }

        .table thead {
            background-color: #ffecb3;
        }

        .table th,
        .table td {
            border-color: #ffecb3;
        }

        .sidebar ul li:nth-child(1) a {
            color: #ff6347;
        }

        .sidebar ul li:nth-child(2) a {
            color: #4682b4;
        }

        .sidebar ul li:nth-child(3) a {
            color: #32cd32;
        }

        .sidebar ul li a:hover {
            color: #333;
        }

        .sidebar ul li a.active {
            color: #333;
        }
    </style>
</head>

<body>
<div class="header">
    <div class="header-title">页面标题</div>
    <div class="header-right">

        <div class="header-username" th:text="${session.username}"></div>
        <div class="header-avatar" >
            <img th:src="@{/bootstrap/img/a.jpg}">
        </div>
<!--        <img th:src="@{/img/a.jpg}" width="100" height="100" alt="">-->
        <a th:href="@{/Student/logout}" class="header-logout">退出</a>
    </div>
</div>
<div class="container">
    <div class="sidebar" th:include="left.html">
        <h2>导航栏</h2>
        <ul>
            <li><a href="#" class="active"><i class="fas fa-user"></i> 学生</a></li>
            <li><a href="#"><i class="fas fa-chalkboard-teacher"></i> 教师</a></li>
            <li><a href="#"><i class="fas fa-book"></i> 课程</a></li>
        </ul>
    </div>
    <div class="content">
        <button type="button" id="addStudentButton" class="btn btn-outline-primary" onclick="addStudent()">新增学生</button>
        <h2>学生信息表</h2>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>password</th>
                <th>性别</th>
                <th>班级</th>
                <th>生日</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="student:${students}">
                <th th:text="${student.id}"></th>
                <th th:text="${student.name}"></th>
                <th th:text="${student.password}"></th>
                <th th:text="${student.sex==1?'男':'女'}"></th>
                <th th:text="${student.clazz}"></th>
                <th th:text="${student.birthday}"></th>
                <th><a th:href="@{/Student/toEdit(id=${student.id})}">修改</a>
                    <a th:href="@{/Student/remove(id=${student.id})}">删除</a></th>
            </tr>
            </tbody>
        </table>
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item"><a class="page-link" th:href="@{/Student/list/{currPage}/3(currPage=${currPage}-1)}">Previous</a></li>
                <li class="page-item"><a class="page-link" th:href="@{/Student/list/1/3}">1</a></li>
                <li class="page-item"><a class="page-link" th:href="@{/Student/list/2/3}">2</a></li>
                <li class="page-item"><a class="page-link" th:href="@{/Student/list/3/3}">3</a></li>
                <li class="page-item"><a class="page-link" th:href="@{/Student/list/{currPage}/3(currPage=${currPage}+1)}">next</a></li>
            </ul>
        </nav>
    </div>
</div>
<script src="/bootstrap/js/jquery.min.js" crossorigin="anonymous"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script>
    function addStudent() {
        window.location.href = "/Student/toPage?page=addStudent";
    }
    // 获取按钮并绑定点击事件
    document.addEventListener("DOMContentLoaded", function () {
        var button = document.getElementById("addStudentButton");
        button.addEventListener("click", addStudent);
    });
</script>
</body>

</html>
